<template>
  <base-breadcrumb v-loading="loading">
    <div class="about-master-container">
      <a-card>
        <title-name title="整改通知单基础信息"></title-name>
        <div class="status">
          <div class="text">{{ form.rectificationStatus }}</div>
          <div class="time">创建时间：{{ form.createTime }}</div>
        </div>

        <BForm
          :config="formConfig"
          :form="form"
          :rule="rules"
        />
      </a-card>

      <a-card>
        <title-name title="隐患明细"></title-name>
        <a-button v-if="!disabled" type="primary" @click="visible = true" class="mb20">添加检查记录</a-button>
        <b-table
          :scroll="{x:1376}"
          :show-page="false"
          ref="table"
          :columns="columns"
          :request="loadData"
        >
          <template slot="action" slot-scope="text, record">
            <div class="pub-table-list-action">
              <span @click="goDetail(record, 'look')">查看</span>
              <span v-if="!disabled" @click="del(record)">删除</span>
            </div>
          </template>
        </b-table>
      </a-card>

      <div class="tar page-btn-right-top">
        <a-button v-if="!disabled" type="primary" @click="save" class="mr20">保存</a-button>
        <BasePrintButton v-if="form.id && disabled" :before-print-fn="beforePrintFn"
                         style="display: inline-block;margin-right: 20px;"
        />
        <a-button v-checkVisibleInDetail @click="$close">关闭</a-button>
      </div>
    </div>

    <addCheckRecordModal
      :outSelectRows="form.inspectionRectificationListVOS"
      :subcontractorId="form.subcontractorId"
      :visible.sync="visible"
      @ok="addCheckRecord"
    />

  </base-breadcrumb>
</template>
<script>
import addCheckRecordModal from './addCheckRecordModal'
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
import rectifyNoticeApi from '@/api/safetySupervision/checkAndRectify/rectifyNotice'

export default {
  name: 'edit',
  components: {
    addCheckRecordModal,
  },
  data() {
    return {
      beforePrintFn: async () => {
        let res = await rectifyNoticeApi.print({ id: this.form.id })
        return res.data.content
      },
      visible: false,
      columns: [
        { title: '检查区域', dataIndex: 'respAreaStr', width: 250 },
        {
          title: '检查类型', dataIndex: 'typeName', width: 150, customRender: (text, row, index) => {
            let list = []
            if (text) {
              list = text.split(',')
            }
            return <div>
              {list.map(v => {
                return <div>{v}</div>
              })}
            </div>
          }
        },
        { title: '问题等级', dataIndex: 'securityControlEnumStr', width: 100 },
        { title: '隐患类型', dataIndex: 'treeLabelStr', width: 150 },
        { title: '检查人', dataIndex: 'creatorName', width: 150 },
        { title: '检查时间', dataIndex: 'createTime', width: 200 },
        { title: '责任分包单位', dataIndex: 'subcontractorName', width: 150 },
        { title: '整改人', dataIndex: 'rectificationUserName', width: 100 },
        { title: '整改期限', dataIndex: 'rectificationTime', width: 200 },
        { title: '状态', dataIndex: 'safetyAuditStatusEnumStr', width: 100 },
        {
          title: '操作',
          dataIndex: 'action',
          width: 120,
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: p => {
        return { code: 200, data: this.form.inspectionRectificationListVOS }
      },
      loading: false,
      form: {
        id: null,
        rectificationUserId: '',
        inspectId: '',
        reviewUserId: '',
        inspectionRectificationListVOS: [],
        viewName: ''
      },
      rules: {},
      disabled: this.$route.query.pageType === 'look'
    }
  },
  computed: {
    formConfig() {
      return [
        {
          row: true,
          children: [
            { type: 'input', value: 'viewName', label: '所属单位', attrs: { disabled: true }, colSpan: 16 },
            // { type: 'input', value: 'projectName', label: '项目名称', attrs: { disabled: true } },
            { type: 'input', value: 'subcontractorName', label: '分包单位', attrs: { disabled: true } },
            {
              type: ASelectOrgPeople,
              value: 'inspectId',
              label: '检查人',
              attrs: { disabled: this.disabled },
              on: {
                onSelectChange: e => {
                  this.form.inspectName = e.name
                }
              }
            },
            {
              type: ASelectOrgPeople,
              value: 'rectificationUserId',
              label: '整改人',
              attrs: { disabled: this.disabled, key: 2 },
              on: {
                onSelectChange: e => {
                  this.form.rectificationUserName = e.name
                }
              }
            },
            {
              type: ASelectOrgPeople, value: 'reviewUserId', label: '复查人', attrs: { disabled: this.disabled, key: 3 },
              on: {
                onSelectChange: e => {
                  this.form.reviewUserName = e.name
                }
              }
            },
            {
              type: 'date-picker', value: 'inspectTime', label: '检查日期', attrs: {
                disabled: this.disabled,
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
              }
            },
            {
              type: 'date-picker', value: 'rectificationTime', label: '整改日期', attrs: {
                disabled: this.disabled,
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
              }
            },
            {
              type: 'date-picker', value: 'reviewTime', label: '复查日期', attrs: {
                disabled: this.disabled,
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
              }
            },
            {
              type: 'date-picker', value: 'rectificationDeadline', label: '整改期限', attrs: {
                disabled: this.disabled,
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
              }
            },
            { type: 'input', value: 'demand', label: '整改要求', attrs: { disabled: this.disabled } }
          ]
        }
      ]
    }
  },
  watch: {},
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }
  },
  methods: {
    del(row) {
      this.$submitConfirm(() => {
        let resIndex = this.form.inspectionRectificationListVOS.findIndex(v => v.id === row.id)
        if (resIndex !== -1) {
          this.form.inspectionRectificationListVOS.splice(resIndex, 1)
          this.$noticeSuccess('删除成功')
          this.$refs.table.refresh()
        }
      }, '确定删除数据？')
    },
    goDetail(record, pageType) {
      this.$router.push({
        path: '/safetySupervision/checkAndRectify/checkRecord/detail',
        query: {
          id: record.id,
          pageType,
          ignoreNoTab: 1,
          history: JSON.stringify([
            {
              title: '检查记录',
              path: '/safetySupervision/checkAndRectify/checkRecord'
            },
            {
              title: '检查记录详情',
              path: '/safetySupervision/checkAndRectify/checkRecord/detail'
            }
          ])
        }
      })
    },
    addCheckRecord(e) {
      this.form.inspectionRectificationListVOS = this.form.inspectionRectificationListVOS.concat(e)
      this.$refs.table.refresh()
    },
    async getData() {
      this.loading = true
      let res = await rectifyNoticeApi.findById({ id: this.form.id })
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.form = res.data
        this.form.viewName = this.form.branchComName + "/" + this.form.projectName
        if (!this.form.inspectionRectificationListVOS) this.form.inspectionRectificationListVOS = []
        this.$refs.table.refresh()
      }
    },
    async save() {
      let temp = this.$clone(this.form)
      temp.ids = temp.inspectionRectificationListVOS.map(v => v.id)
      this.loading = true
      let res = await rectifyNoticeApi.editByMain({}, temp)
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.$noticeSuccess('保存成功')
        this.$close()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.status {
  margin-left: 30px;
  padding: 20px;
  margin-bottom: 20px;
  background: rgb(244, 249, 255);
  color: #000;

  .text {
    font-size: 25px;
    color: rgb(2, 167, 240);
  }
}
</style>
